<template>
  <div>
    <h2>
      总销量
    </h2>
    <div class="chart" id="chart1">
    </div>
  </div>
</template>

<script>
import { getTotalSale } from '@/api/data.js'
// import axios from 'axios'
import * as echarts from 'echarts'
import { onMounted, reactive } from 'vue'

export default {
  setup () {
    //获取数据函数
    const getData = () => {
      return getTotalSale()
    }

    //图表数据
    let data = reactive({})
    let xdata = reactive([])
    let ydata = reactive([])

    //处理数据
    const handleData = () => {
      xdata = data.data.data.chartData.map((item) => item.title)
      ydata = data.data.data.chartData.map((item) => item.num)
      // console.log(xdata, ydata)
    }

    onMounted(async () => {
      data = await getData()
      handleData()

      let myChart = echarts.init(document.getElementById('chart1'))
      myChart.setOption({
        tooltip:{

        },
        // 配置图标的位置 不包含坐标轴中的文字
        grid: {
          top: '3%',
          left: '1%',
          bottom: '3%',
          right: '6%',
          containLabel: true // 包含坐标轴中的文字
        },
        xAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          }
        },
        yAxis: {
          type: "category",
          data: xdata,
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          }
        },
        series: [{
          type: "bar",
          data: ydata,
          itemStyle: {
            normal: {
              // 如果传递数组，则需要传递四个元素，依次表示 左上，右上，右下、左下
              barBorderRadius: [0, 20, 20, 0],
              // color:"red"如果写死值那么是一个固定的颜色
              // 我们需要设置渐变色使用
              // newecharts.graphic.LinearGradient(a, b, c, d, arr)来进行设置
              // a ,b,c,d为0，1
              // a:1 arr中的颜色右到左
              // c:1 arr中的颜色左到右
              // b:1 arr中的颜色下到上
              // d:1 arr中的颜色上到下
              color: new
                echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: '#005eaa'
                  },
                  {
                    offset: 0.5,
                    color: '#339ca8'
                  },
                  {
                    offset: 1,
                    color: '#cda819'
                  }
                ])
            }
          }
        }]
      })

      // 让echarts根据浏览器大小改变动态该改变
      window.onresize = () => {//自适应大小
        myChart.resize()
      }
    })

    return {
      getData, data, xdata, ydata, handleData
    }

  }

}
</script>

<style lang="less" scoped>
h2 {
  height: .75rem;
  color: #fff;
  line-height: .75rem;
  text-align: center;
  font-size: 0.35rem;
}

.chart {
  height: 5.625rem;
}
</style>